import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import store from '../../store';
import { deletes } from '../../api/recycle';

class DeleteRecycle extends Component{

    getTime(){
        var time = new Date();
        time = time.toISOString();
        time = time.substring(0,10);
        return time;
    }

    closeFrame(e){
        store.dispatch({
            type: 'SHOW_DELETE',
            showDelete: false
        });
        $('.backcover').hide();
    }

    deleteRecycle(){
        
        var _that =this;
        var {activeFirstNav, activeSecondNav, recycleList} = this.props;
        var params = {
            firstnav: activeFirstNav,
            secondnav: activeSecondNav,
            time: _that.getTime()
        }

        deletes(params)
        .then(function(response){
            var _state = [];

            for(var [index, value] of recycleList.entries()){
                if(value.firstnav === activeFirstNav && value.secondnav === activeSecondNav)
                continue;
                _state.push(value);
            }
            store.dispatch({
                type: 'GET_RECYCLE',
                recycleList: _state
            });
            _that.closeFrame()
            
        })
        .catch(function(error){

        })
    }

    render(){
        var {showDelete, activeFirstNav, activeSecondNav} = this.props;
        var classs = 'new-container hide';
        if (showDelete) classs = 'new-container';

        return(
            <section id="delete-recycle" className={classs}>
                <div  className="new-title">
                    永久删除文件
                    <i className="icon-remove" onClick={this.closeFrame.bind(this)}></i>
                </div>
                <div>
                    确定<span className="warn">永久</span>删除
                    <span className="warn">{activeFirstNav}</span>
                    文件夹下的
                    <span className="warn">{activeSecondNav}</span>
                    文件吗？
                </div>
                <div>
                    <button type="button" className="cancle-btn" onClick={this.closeFrame.bind(this)}>取消</button>
                    <button type="button" className="delete-btn" onClick={this.deleteRecycle.bind(this)}>删除</button>
                </div>
            </section>
       )
    }

}

const mapStateToProps  = (state) => {
    return {
        showDelete: state.recycleReducer.showDelete,
        activeFirstNav: state.recycleReducer.activeFirstNav,
        activeSecondNav: state.recycleReducer.activeSecondNav,
        recycleList: state.recycleReducer.recycleList
    }
}

const mapDispatchToProps = (dispatch, ownProps) => {
    return {}
}
export default connect(
    mapStateToProps,
    mapDispatchToProps
)(DeleteRecycle);